<template>
	<view class="cate-two flex" style="height: 100%;">
		<view class="aside bg-white">
			<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true" >
				<block v-for="(item, index) in cateList" :key="index">
					<view :class="'one-item sm ' + (index == selectIndex ? 'active' : '')" @click="changeActive(index)">
						<text class="name">{{ item.name }}</text>
						<view v-if="index == selectIndex" class="active-line bg-primary"></view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="main bg-body">
			<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true" @scrolltolower="getGoodsListFun">
				<view class="main-wrap">
					<!-- <ad-swipers :pid="11" height="200rpx" previous-margin="0" padding="0 0 20rpx" radius="10rpx">
					</ad-swipers> -->
					<view class="cate-two" v-if="appConfig.cate_style == 4">
						<view v-for="(sitem, sindex) in cateTwoList" :key="sindex" class="two-item bg-white m-b-20">
							<router-link :to="{path: '/pages/index/goods_search', query: {
								id: sitem.id,
								name: sitem.name,
								type: 1
							}}">
								<view class="title flex row-between">
									<text class="name bold sm">{{sitem.name}}</text>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</router-link>
							<view class="three-list flex flex-wrap">
								<router-link class="three-item" v-for="(titem, tindex) in sitem.children" :key="tindex"
									:to="{path: '/pages/index/goods_search', query: {
									id: titem.id,
									name: titem.name,
									type: 1
								}}">
									<view class=" flex-col col-center m-b-20">
										<u-image mode="aspectFit" width="150rpx" height="150rpx" :src="titem.image">
										</u-image>
										<view class="text m-t-20 xs">{{ titem.name }}</view>
									</view>
								</router-link>
							</view>
						</view>
					</view>
					<view class="goods" v-if="appConfig.cate_style == 1 && hasData">
						<view class="sort-nav-wrap">
							<sort-nav v-model="sortConfig" :show-type="false"></sort-nav>
						</view>
						<view class="goods">
							<view class="goods-list">
								<router-link v-for="(item, index) in goodsList" :key="index"
									:to="`/bundle/pages/goodsDetail/index?id=${item.id}`">
									<view class="flex item bg-white m-t-20">
										<u-image style="margin: 10rpx 0;" width="180rpx" height="180rpx" border-radius="14rpx" :src="item.image">
										</u-image>
										<view class="flex-1 m-l-20 m-r-10">
											<view class="line-2" :class="{'store-tag': item.shop_type == 1}" style="height: 62rpx; line-height: 32rpx;">{{item.name}}</view>
											<view class="flex-start">
												<view class="ellipsis cs_text" v-for="(item2,index2) in item.arguments_text">
													{{item2}}
												</view>
											</view>
											<view class="flex-start">
												<text style="margin-top: -4rpx;" class="dj">定金</text>
												<price-format color="#F1351A" class="m-r-10" :first-size="34" :second-size="26"
													:subscript-size="22" :price="item.prepay_price" :weight="500"></price-format>
											</view>
											<view class="price flex">
												<text class="qgty" style="margin-top: 4rpx;">全国统一零售价</text>
												<!-- line-through -->
												<price-format class="muted" :firstSize="24" :secondSize="24" :subscript-size="24"
													 :price="item.min_price || item.price"></price-format>
											</view>
										<!-- 	<view class="primary mt10">
												<price-format :price="item.min_price" :subscript-size="22" :first-size="34"
													:second-size="26"></price-format>
											</view> -->
										</view>
									</view>
								</router-link>
							</view>
							<loading-footer :status="status" :slot-empty="true">
								<view slot="empty" class="flex-col col-center" style="padding: 200rpx 0 0">
									<image class="img-null" src="/bundle/static/image/goods_null.png"></image>
									<text class="lighter sm">暂无商品</text>
								</view>
							</loading-footer>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getListByLevelOne,
		getGoodsList
	} from '@/api/store'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		loadingType
	} from '@/utils/type.js'
	export default {
		name: "cate-two",
		props: {
			cateList: {
				type: Array,
				default: () => ([])
			},
			type: {
				type: Number,
				default:1
			},
			sc_id: {
				type: Number,
				default:''
			}
		},
		data() {
			return {
				selectIndex: 0,
				cateTwoList: [],
				goodsList: [],
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: '',
				},
				status: loadingType.LOADING,
				hasData: true
			};
		},
		methods: {
			changeActive(index) {
				this.selectIndex = index
			},
			async getListByLevelOneFun() {
				const {
					selectIndex,
					cateList
				} = this
				if(!cateList.length) return
				const id = cateList[selectIndex].id
				const {
					code,
					data
				} = await getListByLevelOne({
					id
				})
				if (code == 1) {
					this.cateTwoList = data
				}
			},
			getGoodsListFun() {
				let {
					page,
					cateList,
					status,
					selectIndex,
					goodsList,
					sortConfig: {
						priceSort,
						saleSort,
					}
				} = this;
				if(!cateList.length) return
				const id = cateList[selectIndex].id
				if (status == loadingType.FINISHED || this.appConfig.cate_style == 4) return;
				getGoodsList({
					page_no: page,
					platform_cate_id: id,
					sort_by_price: priceSort,
					sort_by_sales: saleSort,
					shop_id:this.shop_id,
					coupon_id:this.sc_id,
				}).then(res => {
					if (res.code == 1) {
						let {
							more,
							lists,
						} = res.data;
						goodsList.push(...lists);
						this.page++;
						if (!more) {
							this.status = loadingType.FINISHED;
						}
						if (goodsList.length <= 0) {
							this.status = loadingType.EMPTY
							return;
						}
					} else {
						this.status = loadingType.ERROR
					}
				});
			},
			onRefresh() {
				this.status = loadingType.LOADING
				this.page = 1
				this.goodsList = []
				var that=this
				console.log(that.type)
				if(that.type ==1 ){
					that.shop_id = uni.getStorageSync('nearby_shops')
					console.log('that.shop_id',that.shop_id)
					that.getGoodsListFun()
					// uni.getStorage({
					// key: "nearby_shops",
					// success: (res) => {
					// 	that.shop_id=res.data.id
					// 	console.log('that.shop_id',that.shop_id)
					// 	that.getGoodsListFun()
					// },
					// fail: (err) => {
						
					// },
					// });
				}else{
					that.shop_id = uni.getStorageSync('snid')
					that.getGoodsListFun()
				}
				
			},
		},
		
		
		watch: {
			selectIndex() {
				this.appConfig.cate_style == 1 ? this.onRefresh() : this.getListByLevelOneFun()
			},
			cateList: {
				immediate: true,
				handler(val) {
					this.hasData = val.length ? true : false
					this.appConfig.cate_style == 1 ? this.onRefresh() : this.getListByLevelOneFun()
				}
			},
			'sortConfig.saleSort'() {
				this.onRefresh()
			},
			'sortConfig.priceSort'() {
				this.onRefresh()
			}
		},
		computed: {
			...mapGetters(['appConfig']),
		}
	}
</script>

<style lang="scss" scoped>
	// 自营标签
	.store-tag::before {
		content: '自营';
		font-size: 26rpx;
		color: $-color-white;
		padding: 0rpx 10rpx;
		background: linear-gradient(267deg, #FF2C3C 0%, #F52E99 100%);
		border-radius: 6rpx;
		margin-right: 10rpx;
	}
	.cs_text{
		width: 110rpx;
		color: #999999;
		border-right: 1rpx solid #c2c2c2;
		padding: 0 8rpx;
		font-size: 24rpx;
		margin-top: 4rpx;
	}
	.cs_text:last-child{
		border: none;
	}
	.qgty{
		font-size: 22rpx;
		color: #999999;
		margin-bottom: 4rpx;
	}
	.dj{
		font-size: 24rpx;
		color: #F1351A;
		margin-right: 10rpx;
	}
	.cate-two {
		.aside {
			width: 180rpx;
			flex: none;
			height: 100%;

			.one-item {
				position: relative;
				text-align: center;
				padding: 26rpx 10rpx;

				&.active {
					color: $-color-primary;
					font-size: 26rpx;
					font-weight: bold;
				}

				.active-line {
					position: absolute;
					width: 6rpx;
					height: 30rpx;
					left: 4rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.main {
			height: 100%;
			flex: 1;

			.main-wrap {
				position: relative;

				padding: 20rpx 20rpx 0;

				.two-item {
					border-radius: 10rpx;

					.title {
						height: 90rpx;
						padding: 0 20rpx;

						.line {
							width: 40rpx;
							height: 1px;
							background-color: #BBBBBB;
						}
					}

					.three-list {
						align-items: flex-start;
						padding: 0 10rpx;

						.three-item {
							width: 33%;

							.text {
								text-align: center;
							}
						}
					}

				}
			}
			.goods .item {
				border-radius: 14rpx;
				// width: 400rpx;
			}
		}
	}
</style>
